<template>
  <div>
    <div class="userTop" @click="tip">
      <div class="van-img">
        <van-image
          round
          width="100%"
          height="100%"
          src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png"
        />
      </div>
      <div class="tologin">
        <h3>点击登录</h3>
        <i><van-icon name="arrow" /></i>
      </div>
    </div>
    <!-- 列表 -->
    <div class="van-hairline--top">
      <van-grid square :column-num="3" gutter="0px">
        <van-grid-item v-for="item in list" :key="item.id" class="bbox" @click="tip">
          <van-icon :name="item.icon" />
          <i class="text_large">{{ item.text }}</i>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: "1",
          icon: "label-o",
          text: "我的订单",
        },
        {
          id: "2",
          icon: "bill-o",
          text: "优惠券",
        },
        {
          id: "3",
          icon: "goods-collect-o",
          text: "礼品卡",
        },
        {
          id: "4",
          icon: "location-o",
          text: "我的收藏",
        },
        {
          id: "5",
          icon: "flag-o",
          text: "我的足迹",
        },
        {
          id: "6",
          icon: "user-o",
          text: "会员福利",
        },
        {
          id: "7",
          icon: "aim",
          text: "地址管理",
        },
        {
          id: "8",
          icon: "warn-o",
          text: "账号安全",
        },
        {
          id: "9",
          icon: "manager-o",
          text: "联系客服",
        },
        {
          id: "10",
          icon: "question-o",
          text: "帮助中心",
        },
        {
          id: "11",
          icon: "photo-o",
          text: "意见反馈",
        },
      ],
    };
  },
  methods: {
    tip() {
      this.$toast("功能未开发");
    },
  },
};
</script>

<style lang="less" scoped>
.userTop {
  width: 100%;
  height: 80px;
  background-color: #333;
  padding: 30px 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .van-img {
    height: 80px;
    width: 80px;
  }
  .tologin {
    flex: 1;
    color: #fff;
    display: flex;
    font-size: 18px;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
}
.bbox {
  .text_large {
    font-size: 12px;
    margin-top: 8px;
  }
}
.van-grid{
  background-color: #fff;
  /deep/.van-icon{
    font-size: 30px;
  }
}
</style>
